import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { routerShape } from 'react-router';
import isEqual from 'lodash/isEqual';
import { WeaErrorPage, WeaTools, WeaTab, WeaDialog, WeaNewScroll, WeaQrcode,WeaAlertPage } from 'ecCom';
import { Row, Col, Carousel } from 'antd';

import * as screenApis from '../apis/screen.js'
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
let _this = null;
let meetingScreenHeaderScroll = false;
@inject('meetingDialog')
@observer
class Screen extends React.Component {
	static contextTypes = {
		router: routerShape
	}
	constructor(props) {
		super(props);
		_this = this;
		this.state = {
      status:'',
			fontsize: '',
			bgcolor: '',
			bgimg: '',
			fontcolor: '',
			showdep: '',
			showhead: '',
			shownum: '',
			showsub: '',
			QrCode: '',
			count: '10',
			unSign: '4',
			doSign: '6',
			showtitle: '',
			list: [],
			startRoll: false,//是否开启滚动
			resize: '',
      meetingScreenLeftHeight:'',
			qrcodeRefreshTime : 10,
			loading: false,
		}
	}

	componentWillMount() {
		let { meetingid, bgcolor = '', bgimg, fontsize, fontcolor, showdep, showhead, shownum, showsub, showtitle } = this.props.params;
		if (bgcolor) {
			bgcolor = `#${bgcolor}`
			fontcolor = `#${fontcolor}`
		}
		let p1 = '', p2 = '';
		const { query, query:{ type } } = this.props.location;
		if (!bgcolor) {
			p1 = screenApis.getScreenSignData({ meetingid: meetingid != 'demo' ? meetingid : '' })
			p2 = screenApis.getQrCode({ meetingid: meetingid != 'demo' ? meetingid : '' })
		}
			meetingid != 'demo' && !bgcolor && Promise.all([p1, p2]).then((result) => {
				if(result[0].ret == 'noright'){
					this.setState({status:result[0].ret})
				}else{
					this.setState({
						loading: true,
						status: result[0].ret,
						fontsize: result[0].fontsize,
						bgcolor: result[0].bgcolor,
						bgimg: result[0].bgimg,
						fontcolor: result[0].fontcolor,
						showdep: result[0].showdep,
						showhead: result[0].showhead,
						shownum: result[0].shownum,
						showsub: result[0].showsub,
						showtitle: result[0].showtitle,
						QrCode: result[1].QrCode,
						count: result[0].count,
						unSign: result[0].unSign,
						doSign: result[0].doSign,
						list: result[0].list,
						startRoll: result[0].list.length > 5 ? true : false,
					});
					if(type === 'view') {
						this.setState({//设置时预览
							loading: true,
							bgcolor: `#${query.bgcolor}`,
							bgimg: query.bgimg,
							fontcolor: `#${query.fontcolor}`,
							showdep: query.showdep,
							showhead: query.showhead,
							shownum: query.shownum,
							showsub: query.showsub,
							showtitle: query.showtitle,
							fontsize: query.fontsize,
						})
					}
				}
			});
			!!bgcolor && this.setState({//新建或者编辑需要预览，不能走接口，只能通过路由传递
				loading: true,
				bgcolor: bgcolor,
				bgimg: bgimg,
				fontcolor: fontcolor,
				showdep: showdep,
				showhead: showhead,
				shownum: shownum,
				showsub: showsub,
				showtitle: showtitle,
				fontsize: fontsize,
			})
	}

	componentDidMount() {
		let meetingScreenLeftHeight = jQuery(".meetingScreenLeft") ? jQuery(".meetingScreenLeft").height() : 500
		let { meetingid, bgcolor = '', bgimg, fontsize, fontcolor, showdep, showhead, shownum, showsub, showtitle } = this.props.params;
		const { getPreview } = this.props.meetingDialog;
		getPreview({ meetingid: meetingid });
		if (bgcolor) {
			bgcolor = `#${bgcolor}`
			fontcolor = `#${fontcolor}`
		}
		let p1 = '', p2 = '';
		if (!bgcolor) {
			p1 = screenApis.getScreenSignData({ meetingid: meetingid != 'demo' ? meetingid : '' })
			p2 = screenApis.getQrCode({ meetingid: meetingid != 'demo' ? meetingid : '' })
		}
		const { query, query:{ type } } = this.props.location;
			meetingid != 'demo' && !bgcolor && Promise.all([p1, p2]).then((result) => {
				if(result[0].ret == 'noright'){
					this.setState({status:result[0].ret})
				}else{
					this.setState({
						status: result[0].ret,
						fontsize: result[0].fontsize,
						bgcolor: result[0].bgcolor,
						// bgimg: result[0].bgimg,
						fontcolor: result[0].fontcolor,
						showdep: result[0].showdep,
						showhead: result[0].showhead,
						shownum: result[0].shownum,
						showsub: result[0].showsub,
						showtitle: result[0].showtitle,
						QrCode: result[1].QrCode,
						count: result[0].count,
						unSign: result[0].unSign,
						doSign: result[0].doSign,
						list: result[0].list,
						startRoll: result[0].list.length > 5 ? true : false,
						meetingScreenLeftHeight:meetingScreenLeftHeight,
					});
					if(type === 'view') {
						this.setState({//设置时预览
							loading: true,
							bgcolor: `#${query.bgcolor}`,
							bgimg: query.bgimg,
							fontcolor: `#${query.fontcolor}`,
							showdep: query.showdep,
							showhead: query.showhead,
							shownum: query.shownum,
							showsub: query.showsub,
							showtitle: query.showtitle,
							fontsize: query.fontsize,
						})
					} else {
						if(result[1].dynamic){
							this.setState({
								qrcodeRefreshTime:result[1].qrcodeRefreshTime
							})
							this.startGetQrcodeInterval();
						}
						this.startSetInterval();
					}
				}
				
			})
			!!bgcolor && this.setState({//新建或者编辑需要预览，不能走接口，只能通过路由传递
				bgcolor: bgcolor,
				bgimg: bgimg,
				fontcolor: fontcolor,
				showdep: showdep,
				showhead: showhead,
				shownum: shownum,
				showsub: showsub,
				showtitle: showtitle,
				fontsize: fontsize,
				meetingScreenLeftHeight:meetingScreenLeftHeight

			})
		window.addEventListener('resize', this.onWindowResize);

	}

	insertStyleSheet = () => {
		let headerHeight = jQuery(this.meetingScreenHeaderRef).height();
		if(headerHeight > 2*64 + 5) { // 64 单行文本的高度， 5是防止浏览器解析高度差异
			meetingScreenHeaderScroll = true;
			if(document.getElementById('meetingBigScreenSignAnimation') === null) {
				let items = parseInt(headerHeight/64);
				let animationItem = '';
				let itemPercent = 100/(items+1);
				let second = (items+1)*3;
				for(let i = 0; i <= items; i ++) {
					animationItem += `${i*itemPercent}% { margin-top: -${64*i}px } `;
				}
				animationItem += `100% { margin-top: -${headerHeight}px }`;
				const runkeyframes = `@keyframes dropdown { ${animationItem} }`
				const style = document.createElement('style');
				style.id = 'meetingBigScreenSignAnimation';
				style.type = 'text/css';
				style.innerHTML = runkeyframes + `.meeting-screen-header-title { animation: dropdown ${second}s linear infinite; }`;
				document.getElementsByTagName('head')[0].appendChild(style);
			}
		} else {
			meetingScreenHeaderScroll = false;
			if(document.getElementById('meetingBigScreenSignAnimation')) {
				document.getElementById('meetingBigScreenSignAnimation').remove();
			}
		}
	}

  componentWillReceiveProps(nextProps) {
    let meetingScreenLeftHeight = jQuery(".meetingScreenLeft") ? jQuery(".meetingScreenLeft").height() : 500
    let { meetingid, bgcolor = '', fontsize, bgimg, fontcolor, showdep, showhead, shownum, showsub, showtitle } = this.props.params
    if (bgcolor) {
      bgcolor = `#${bgcolor}`
      fontcolor = `#${fontcolor}`
    }
    let p1 = '', p2 = '';
    if (!bgcolor) {
      p1 = screenApis.getScreenSignData({ meetingid: meetingid != 'demo' ? meetingid : '' })
      p2 = screenApis.getQrCode({ meetingid: meetingid != 'demo' ? meetingid : '' })

    }
    meetingid != 'demo' && !bgcolor && Promise.all([p1, p2]).then((result) => {
      if(result[0].ret == 'noright'){
        this.setState({status:result[0].ret})
      }else{
        this.setState({
          status: result[0].ret,
          fontsize: result[0].fontsize,
          bgcolor: result[0].bgcolor,
          bgimg: result[0].bgimg,
          fontcolor: result[0].fontcolor,
          showdep: result[0].showdep,
          showhead: result[0].showhead,
          shownum: result[0].shownum,
          showsub: result[0].showsub,
          showtitle: result[0].showtitle,
          QrCode: result[1].QrCode,
          count: result[0].count,
          unSign: result[0].unSign,
          doSign: result[0].doSign,
          list: result[0].list,
          startRoll: list&&list.length > 5 ? true : false,
          meetingScreenLeftHeight:meetingScreenLeftHeight,
  
        })
      }
      
    })
    !!bgcolor && this.setState({//新建或者编辑需要预览，不能走接口，只能通过路由传递
      bgcolor: bgcolor,
      bgimg: bgimg,
      fontcolor: fontcolor,
      showdep: showdep,
      showhead: showhead,
      shownum: shownum,
      showsub: showsub,
      showtitle: showtitle,
      fontsize: fontsize,
      meetingScreenLeftHeight:meetingScreenLeftHeight,
    })
	}
	
	componentDidUpdate() {
		this.state.showtitle === '1' && this.insertStyleSheet();
	}

  componentWillUnmount() {
    //组件卸载时一般清理一些状态
    //清除定时器，不知道是否生效
    request && window.clearInterval(request)
  }

	onWindowResize = () => {
		this.setState({ resize: Math.floor(Math.random() * 1000) })
  }
  
  startGetQrcodeInterval = () => {
    let { meetingid } = this.props.params;
    const { getQrCode } = this.props.meetingDialog
    //设置定时器
    this.interval = setInterval(() => {
      getQrCode({meetingid:meetingid}).then((result)=>{
        if(result.QrCode){
			result.QrCode = decodeURIComponent(result.QrCode)
          this.setState({QrCode:result.QrCode})
        }
      })
    },this.state.qrcodeRefreshTime * 1000)
  }

	startSetInterval = () => {
		let { meetingid } = this.props.params;
		//设置定时器
		var request = setInterval(() => {
			let p1 = screenApis.getScreenSignData({ meetingid: meetingid != 'demo' ? meetingid : '' })
			// let p2 = screenApis.getScreenSet({ meetingid: meetingid != 'demo' ? meetingid : '' })
			Promise.all([p1]).then((result) => {
        if(result[0].ret == 'noright'){
          this.setState({status:result[0].ret})
        }else{
          let { fontsize, bgcolor, bgimg, fontcolor, showdep, showhead, shownum, showsub, showtitle, QrCode, count, doSign, unSign, list } = this.state;
          let change = false
  
          if (bgcolor != result[0].bgcolor ||
            fontsize != result[0].fontsize ||
            bgimg != result[0].bgimg ||
            fontcolor != result[0].fontcolor ||
            showdep != result[0].showdep ||
            showhead != result[0].showhead ||
            shownum != result[0].shownum ||
            showsub != result[0].showsub ||
            showtitle != result[0].showtitle ||
            // QrCode != result[0].QrCode ||
            count != result[0].count ||
            doSign != result[0].doSign ||
            unSign != result[0].unSign ||
            list != result[0].list
          ) change = true
          if (!isEqual(list, result[0].list) || change) {
            this.setState({
              status: result[0].ret,
              fontsize: result[0].fontsize,
              bgcolor: result[0].bgcolor,
              // bgimg: result[0].bgimg,
              fontcolor: result[0].fontcolor,
              showdep: result[0].showdep,
              showhead: result[0].showhead,
              shownum: result[0].shownum,
              showsub: result[0].showsub,
              showtitle: result[0].showtitle,
              // QrCode: result[0].QrCode,
              count: result[0].count,
              unSign: result[0].unSign,
              doSign: result[0].doSign,
              list: result[0].list,
              startRoll: list.length > 5 ? true : false,
            })
          }
        }
				
			})
		}, 2000)
	}

	checkHeight = ()=>{
		let meetingScreenLeftHeight = jQuery(".meetingScreenLeft") ? jQuery(".meetingScreenLeft").height() : 500
			if(meetingScreenLeftHeight != this.state.meetingScreenLeftHeight){
				this.setState({
					meetingScreenLeftHeight:meetingScreenLeftHeight
				})
			}
	}

	render() {
		this.checkHeight();
		let { status, fontsize, bgcolor, bgimg, fontcolor, showdep, showhead, shownum, showsub, QrCode, count, doSign, unSign, list, meetingScreenLeftHeight, showtitle, loading } = this.state;
		// const {QrCode, count, doSign, unSign, list, meetingScreenLeftHeight} = this.state;
		// const {fontsize, bgcolor, bgimg, fontcolor, showdep, showhead, shownum, showsub} = toJS(this.props.meetingDialog.screenParams);
		const MH = document.documentElement.clientHeight;//浏览器高度
		const src = `/weaver/weaver.file.FileDownload?fileid=${bgimg}`;
		const backgroundImage = `url(${src})`;
		const { meetingid } = this.props.params;
		let { dialogStatus:{ meetingname } } = this.props.meetingDialog;

		let columnNum = 5;
		if (showhead != 1) { columnNum-- }
		if (showsub != 1) { columnNum-- }
		if (showdep != 1) { columnNum-- }
		// let width = 100 / columnNum
		let col1 = '', col2 = '', col3 = '', col4 = '', col5 = '', off1 = '';
		if (columnNum == 5) { col1 = 4, col2 = 4, col3 = 6, col4 = 5, col5 = 5 }
		if (columnNum == 4) {
			if (showhead == 1) {
				col1 = 4, col2 = 6, col3 = 6, col4 = 6, col5 = 6
			} else {
				col1 = 4, col2 = 6, col3 = 6, col4 = 6, col5 = 6
			}
		}
		if (columnNum == 3) {
			if (showhead == 1) {
				col1 = 4, col2 = 10, col3 = 10, col4 = 10, col5 = 10
			} else {
				col1 = 4, col2 = 8, col3 = 8, col4 = 8, col5 = 8
			}
		}
		if (columnNum == 2) {
			col1 = 12, col2 = 6, col3 = 6, col4 = 6, col5 = 6, off1 = 6
		}
		let qrcodeBorderWrapWidth = jQuery(".qrcodeBorderWrap") ? jQuery(".qrcodeBorderWrap").width() : 460;
		let deviceHeight = window.innerHeight;
		
		if(showtitle == '1' && this.meetingScreenContentRef && this.meetingScreenContentRef.props && this.meetingScreenContentRef.props.style) {
			qrcodeBorderWrapWidth = this.meetingScreenContentRef.props.style.height - 85; // 底部文字高度
		}
		let headerHeight = jQuery(this.meetingScreenHeaderRef).height();
		let headerStyle = {};
		if(headerHeight < (64+5)) {
			headerStyle = { paddingTop: '40px' };
		}
		if (this.props.params && !!this.props.params.bgcolor) {
			meetingname = 'demo预览';
		}
		return (
			status=='noright'?
      <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@5hue7q`} style={{position: 'absolute', width:'100%', top:'40%'}}>
        <div>
          {getLabel(2012 ,'对不起，您暂时没有权限！')}
        </div>
      </WeaAlertPage>
      :<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ihdg2h`} height={'100%'}>
        {loading && <div className="meeting-screen" style={{ fontSize: `${fontsize}px`, overflow: 'hidden', height: MH, backgroundColor: bgcolor, backgroundImage: backgroundImage, backgroundRepeat: 'no-repeat', backgroundSize: '100% 100%' }} >
          {showtitle == '1' && <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@jne01p`} className="meeting-screen-header" style={{ height: 0.27*deviceHeight }}>
						<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@sre3ex`} span={14} offset={5} className="meeting-screen-header-scroll" style={headerStyle}>
							<div className="meeting-screen-header-title meeting-screen-header-titletext" ref={ ele => this.meetingScreenHeaderRef = ele }>
								{meetingname}
							</div>
							{meetingScreenHeaderScroll && <div className="meeting-screen-header-titletext"> 
								{meetingname} {/* 解决滚动到最后一行后有空白 */}
							</div>}
						</Col>
					</Row>}
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@v0b4gn`} style={{ height: showtitle == '1' ? 0.59*deviceHeight : '100%' }} type="flex" align="middle" ref={ ele => this.meetingScreenContentRef = ele }>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@95vrv1`} className="meetingScreenLeft" span={12} style={{ textAlign: 'center', color: fontcolor }}>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5ae0fv`} >
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ovko1v`} span={16} offset={4} className="qrcodeBorderWrap">
                  <div className="qrcodeBorder" style={{ width: qrcodeBorderWrapWidth || 460, height: qrcodeBorderWrapWidth || 460, border: "3px solid #ffffff", display: 'inline-block' }}><WeaQrcode ecId={`${this && this.props && this.props.ecId || ''}_WeaQrcode@80i41r`} size={qrcodeBorderWrapWidth - 6} level={"H"} text={`${QrCode}`} /></div>
                  <div className="gutter-box" style={{ margin: showtitle == '1' ? '49px 0px 22px 0px' : '20px 0 15px 0' }}>{getLabel(128302,"使用Emobile【扫一扫】功能扫描二维码即可签到")}</div>
                  {shownum == 1 && meetingid != 'demo' ? <div className="gutter-box"><span>{getLabel(382721,"应到")}<span className="bigSpanNum">{count}</span>{getLabel(383382,"人")}</span> <span style={{ padding: '0 15px' }}>{getLabel(382723,"实到")}<span className="bigSpanNum">{doSign}</span>{getLabel(383382,"人")}</span><span>{getLabel(383383,"未到")}<span className="bigSpanNum">{unSign}</span>{getLabel(383382,"人")}</span> </div> : ''}
                  {shownum == 1 && meetingid == 'demo' ? <div className="gutter-box"><span>{getLabel(382721,"应到")}<span className="bigSpanNum">10</span>{getLabel(383382,"人")}</span> <span style={{ padding: '0 15px' }}>{getLabel(382723,"实到")}<span className="bigSpanNum">6</span>{getLabel(383382,"人")}</span><span>{getLabel(383383,"未到")}<span className="bigSpanNum">4</span>{getLabel(383382,"人")}</span> </div> : ''}
                </Col>
              </Row >
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@l39cgd`} span={12} style={{  minHeight:meetingScreenLeftHeight || '100%' }}>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@vegxxh`} >
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ds2r5v`} span={24}  >
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@o63xha`} style={{ height: '50px', color: fontcolor }}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0roxn2`} span={col1} style={{ display: showhead == 1 ? 'inline-block' : 'none', height: '50px', lineHeight: '50px' }} >
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8b79gv`} span={col2} offset={off1} style={{ display: 'inline-block', height: '50px', lineHeight: '50px' }}>
                      <span>{getLabel(413,"姓名")}</span>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5hdoj9`} span={col3} style={{ display: showdep == 1 ? 'inline-block' : 'none', height: '50px', lineHeight: '50px' }}>
                      <span>{getLabel(383371,"部门")}</span>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cvuo2w`} span={col4} style={{ display: showsub == 1 ? 'inline-block' : 'none', height: '50px', lineHeight: '50px' }}>
                      <span>{getLabel(131395,"分部")}</span>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@way0ff`} span={col5} style={{ display: 'inline-block', height: '50px', lineHeight: '50px' }}>
                      <span>{getLabel(383482,"签到时间")}</span>
                    </Col>
                  </Row>
                </Col>
              </Row>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@zvvdm6`} >
                <div className="gutter-box" style={{ height: '100%', color: fontcolor }}>
                  <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@5yfuw3`} dots={false} vertical={true} effect="fade" autoplay autoplaySpeed={3000}>
                    {
                      this.getContain()
                    }
                  </Carousel>
                </div>
              </Row>

            </Col>
          </Row>
        </div >}
			</WeaNewScroll>
		)
	}

	getTable = () => {
		let {showdep, showhead, showsub,list, meetingScreenLeftHeight} = this.state;
		// const {showdep, showhead, showsub,} = toJS(this.props.meetingDialog.screenParams);
		const allListRows =Math.floor(meetingScreenLeftHeight/60)-1//分页行数
		if (this.props.params && !!this.props.params.bgcolor) {
			list = [
				{ dep: getLabel(383483,"demo预览"), name: getLabel(383483,"demo预览"), sub: getLabel(383483,"demo预览"), uid: '', signtime: getLabel(383483,"demo预览") },
				{ dep: getLabel(383483,"demo预览"), name: getLabel(383483,"demo预览"), sub: getLabel(383483,"demo预览"), uid: '', signtime: getLabel(383483,"demo预览") },
				{ dep: getLabel(383483,"demo预览"), name: getLabel(383483,"demo预览"), sub: getLabel(383483,"demo预览"), uid: '', signtime: getLabel(383483,"demo预览") },
				{ dep: getLabel(383483,"demo预览"), name: getLabel(383483,"demo预览"), sub: getLabel(383483,"demo预览"), uid: '', signtime: getLabel(383483,"demo预览") },
				{ dep: getLabel(383483,"demo预览"), name: getLabel(383483,"demo预览"), sub: getLabel(383483,"demo预览"), uid: '', signtime: getLabel(383483,"demo预览") },
				{ dep: getLabel(383483,"demo预览"), name: getLabel(383483,"demo预览"), sub: getLabel(383483,"demo预览"), uid: '', signtime: getLabel(383483,"demo预览") },

			]
		}
		let columnNum = 5
		if (showhead != 1) { columnNum-- }
		if (showsub != 1) { columnNum-- }
		if (showdep != 1) { columnNum-- }
		let col1 = '', col2 = '', col3 = '', col4 = '', col5 = '', off1 = '';
		if (columnNum == 5) { col1 = 4, col2 = 4, col3 = 6, col4 = 5, col5 = 5 }
		if (columnNum == 4) {
			if (showhead == 1) {
				col1 = 4, col2 = 5, col3 = 7, col4 = 7, col5 = 6
			} else {
				col1 = 4, col2 = 5, col3 = 7, col4 = 6, col5 = 6
			}
		}
		if (columnNum == 3) {
			if (showhead == 1) {
				col1 = 4, col2 = 10, col3 = 10, col4 = 10, col5 = 10
			} else {
				col1 = 4, col2 = 8, col3 = 8, col4 = 8, col5 = 8
			}
		}
		if (columnNum == 2) {
			col1 = 12, col2 = 6, col3 = 6, col4 = 6, col5 = 6, off1 = 6
		}
		let allList = list.map((record, index) => {
			let { headimg, name, dep, sub, signtime } = record;
			return (
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5t1eye@${index}`} style={{ height: '50px', margin: '10px 0', overflow: 'hidden' }}>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7rxx1g@${index}`} span={col1} style={{ display: showhead == 1 ? 'inline-block' : 'none', height: '50px', lineHeight: '50px' }}>

						<span style={{ display: 'inline-block', width: '50px', height: '50px', marginLeft: '30px' }}>  <span dangerouslySetInnerHTML={{ __html: headimg }} /></span>
					</Col>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2jyz8w@${index}`} span={col2} offset={off1} style={{ display: 'inline-block', height: '50px', lineHeight: '50px' }}>
						<span>{name}</span>
					</Col>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@v7dh9g@${index}`} span={col3} style={{ display: showdep == 1 ? 'inline-block' : 'none', height: '50px', lineHeight: '50px' }}>
						<span>{dep}</span>
					</Col>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xyaybq@${index}`} span={col4} style={{ display: showsub == 1 ? 'inline-block' : 'none', height: '50px', lineHeight: '50px' }}>
						<span>{sub}</span>
					</Col>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@u1cxg4@${index}`} span={col5} style={{ display: 'inline-block', height: '50px', lineHeight: '50px' }}>
						<span>{signtime}</span>
					</Col>
				</Row>
			)
		})
		let newList = []
		let newSmallList = [];
		let countNum = 0
		allList.forEach((record, index) => {
			newSmallList.push(record)
			countNum++;
			if (countNum == allListRows) {//每一屏数据

				newList.push(newSmallList);
				countNum = 0;
				newSmallList = []
			}
			if (allList.length - 1 == index) {
				newList.push(newSmallList);
			}

		})
		return newList
	}

	getContain = () => {
		let table = this.getTable();
		let contain = table.map((record, index) => {
			return (
				<div>
					{record}
				</div>
			)
		})
		return contain
	}

}

export default Screen
